<template>
	<div class="login">
    <van-nav-bar class="red-color" title="验证码登陆" left-arrow @click-left="goback"/>
    <div class="store_header">
      <div class="store_avatar">
        <img src="../../../assets/images/login.png" alt="logo" height="150">
      </div>
      <!-- <div class="store_name">登录账号</div> -->
    </div>
    <md-field-group class="register_view">
      <md-field
        v-model="mobile"
        icon="mobile"
        placeholder="请输入手机号"/>
      <md-field
			v-model="code"
			icon="lock"
			placeholder="请输入短信验证码"
		>
			<div slot="rightIcon" @click="getCode" class="getCode red">
				<countdown v-if="counting" :time="60000" @end="countdownend">
				  <template slot-scope="props">{{ +props.seconds || 60 }}秒后获取</template>
				</countdown>
				<span v-else>获取验证码</span>

			</div>
		</md-field >

      <div class="register_submit">
        <van-button size="large" type="danger" @click="submitCode">登录</van-button>
      </div>

      <div class="register_footer">
        账号登陆?
        <router-link to="/login" class="red">登录</router-link>
      </div>
    </md-field-group>
  </div>
</template>

<script>
import axios from 'axios';
import field from '@/components/field/';
import fieldGroup from '@/components/field-group/';
import { setLocalStorage } from '@/utils/local-storage';
import { authSms } from '@/api/api';

export default {
  data() {
    return {
      mobile: '',
      code: '',
      counting: false,
    };
  },

  methods: {
    getCode() {
      if (!(/^1[3|4|5|7|8]\d{9}$/.test(this.mobile))) {
        this.$toast('手机号码有误，请重填');
        return false;
      }
      this.counting = true;
      axios.post(process.env.VUE_APP_BASE_API+'/wx/auth/sendSMSForLogin', {mobile: this.mobile}).then(res =>{
        console.log(res)
        if(res.data.errno === 0) {
          this.$toast('发送短信成功！');
        } else {
          this.$toast(res.data.errmsg);
        }
      }).catch((e) => {
        console.log(e);
        this.$toast('错误');
      });
    },
    countdownend() {
      this.counting = false;
    },
    submitCode() {
      if (!(/^1[3|4|5|7|8]\d{9}$/.test(this.mobile))) {
        this.$toast('手机号码有误，请重填');
        return false;
      } else {
        if (this.code) {
          axios.post(process.env.VUE_APP_BASE_API+'/wx/auth/loginByCaptcha', {mobile: this.mobile, code: this.code}).then(res => {
            if(res.data.errno === 0) {
              this.userInfo = res.data.data.userInfo;
              setLocalStorage({
                Authorization: res.data.data.token,
                avatar: this.userInfo.avatarUrl,
                nickName: this.userInfo.nickName,
                storeId: this.userInfo.storeId,
                storeName: this.userInfo.storeName
              });
              this.routerRedirect();
            } else {
              this.$toast(res.data.errmsg);
            }
          }).catch((e) => {
            console.log(e);
            this.$toast('错误');
          });
        } else {
          this.$toast('请填写验证码');
        }
      }
      
    },
    routerRedirect() {
      window.location = '#/user/';
    },
    goback() {
      this.$router.push('/login');
    }
  },

  components: {
    [field.name]: field,
    [fieldGroup.name]: fieldGroup
  }
};
</script>

<style lang="scss" scoped>
div.register_view {
  background-color: #fff;
  padding-top: 30px;
}

div.register_submit {
  padding-top: 30px;
  padding-bottom: 20px;
}

.register_footer {
  text-align: right;
  color: $font-color-gray;
}
.yellow-color {
  color: #ED6D00;
}
.gray-color {
  color: #999;
}
.red-color {
  background: #ED6D00 !important;
}
.text-center {
  text-align: center;
}
.mt-2 {
  margin-top: 10px;
}
.rd20 {
  border-radius: 20px;
}
.login {
  position: relative;
  background-color: #fff;
}
.popupcss {
  width: 90%;
  height: 90%;
  padding: 10px;
  h2 {
    font-size: 20px;
    text-align: center;
  }
}
.store_header {
  text-align: center;
  padding: 30px 0;
  .store_avatar img {
    // border-radius: 50%;
  }
  .store_name {
    padding-top: 5px;
    font-size: 16px;
  }
}
.register {
  padding-top: 40px;
  color: $font-color-gray;
  a {
    color: $font-color-gray;
  }
  > div {
    width: 50%;
    box-sizing: border-box;
    padding: 0 20px;
  }
  .connect {
    @include one-border(right);
    text-align: right;
  }
}
.bottom_positon {
  position: absolute;
  bottom: 30px;
  width: 100%;
}
</style>
